<!DOCTYPE html>
<html lang="en" xmlns = "http://www.w3.org/1999/xhtml"
      xmlns:th = "http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spittr</title>
</head>
<body>
    <form method="POST" th:object="${spitter}" enctype="multipart/form-data">
        <div class="errors" th:if = "${#fields.hasErrors('*')}">
            <ul>
                <li th:each="err : ${#fields.errors('*')}"
                    th:text="${err}">Input is incorrest</li>
            </ul>
        </div>
        <label th:class="${#fields.hasErrors('firstName')} ? error">First Name</label>:
        <input type="text" th:field="*{firstName}" th:class="${#fields.hasErrors('firstName')}? 'error'"/>
        <br>

        <label th:class="${#fields.hasErrors('lastName')} ? error">Last Name</label>:
        <input type="text" th:field="*{lastName}" th:class="${#fields.hasErrors('lastName')}? 'error'"/>
        <br>

        <label th:class="${#fields.hasErrors('email')} ? error">Email</label>:
        <input type="text" th:field="*{email}" th:class="${#fields.hasErrors('email')}? 'error'"/>
        <br>

        <label th:class="${#fields.hasErrors('username')} ? error">User Name</label>:
        <input type="text" th:field="*{username}" th:class="${#fields.hasErrors('username')}? 'error'"/>
        <br>

        <label th:class="${#fields.hasErrors('password')} ? error">password</label>:
        <input type="password" th:field="*{password}" th:class="${#fields.hasErrors('password')}? 'error'"/>
        <br>

        <label>Profile Picture</label>:
        <input type="file" name="profilePicture" accept="image/jpeg,image/png,image/gif"/>
        <br>

        <input type="submit" value ="Register" />
    </form>
</body>
</html>